import { Tabs, Typography } from '@arco-design/web-react';
import { useState } from 'react';
import { RoleTree, Module, List } from './roleInfo/index'
const TabPane = Tabs.TabPane;
const style = {
    textAlign: 'center',
    marginTop: 20,
  };
  
function RoleInfo({state, setState}){
    const [activeTab, setActiveTab] = useState('1');
    return(
        <div style={{height: '100%'}}>
           <Tabs activeTab={activeTab} onChange={setActiveTab}>
                <TabPane key='1' title='角色树'>
                    <Typography.Paragraph style={style}>
                        <RoleTree state={state} setState={setState}/>
                    </Typography.Paragraph>
                </TabPane>
                <TabPane key='2' title='模块选择'>
                    <Typography.Paragraph style={style}>
                        <Module state={state} setState={setState}/>
                    </Typography.Paragraph>
                </TabPane>
                <TabPane key='3' title='列表'>
                    <Typography.Paragraph style={style}>
                        <List state={state} setState={setState}/>
                    </Typography.Paragraph>
                </TabPane>
            </Tabs>
        </div>
    )
}

export default RoleInfo